import React, { PureComponent } from 'react';

class StatusTimer extends PureComponent {
  state = {
    timerObj: {}
  }

  componentDidMount() {

    if (this.props.activetime) {
      this.timer(this.props.price_validity)
    } else {

    }
  }


  componentWillUnmount() {
    clearInterval(this.Timer)
  }

  render() {

    const { timerObj } = this.state
    const { sprice, oprice, stock, salenum, unit } = this.props

    return (
      <>
        <div className="goods-detail-status">
          <div className="container flex-row ">
            <div className="left flex-column">
              <div className="price">
                <span>￥{sprice}/{unit}</span>
                <span>￥{oprice}</span>
              </div>
              <div className="pinghuo-status flex-row">
                {
                  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(val => {
                    return (
                      <div className="yuan" key={val} style={val !== 10 && val !== 9 && val !== 8 ? { backgroundColor: '#FF5A00' } : {}}></div>
                    )
                  })
                }
              </div>
            </div>
            <div className="center">
              <div className="pinghuo-status-text">
                <p>已售{salenum}</p>
                <p>库存{stock}</p>
              </div>
            </div>
            <div className="right">
              <div className="timer flex-column">
                <div className="timer-title">
                  距价格到期时间结束
                    </div>
                <div className="timers flex-row">
                  <div className="cube">
                    <span>{timerObj.day}</span>
                  </div>
                      天
                      <div className="cube">
                    <span>{timerObj.hour}</span>
                  </div>
                      时
                      <div className="cube">
                    <span>{timerObj.min}</span>
                  </div>
                      分
                      <div className="cube">
                    <span>{timerObj.sec}</span>
                  </div>
                      秒
                    </div>
              </div>
            </div>
          </div>
        </div>
      </>

    );
  }

  timer(expiredTime) {
    this.Timer = setInterval(() => {
      let timerObj = {}
      let now = expiredTime - Date.parse(new Date()) / 1000

      if (now < 0) {
        this.setState({
          timerObj: {
            "day": 0,
            "hour": 0,
            "min": 0,
            "sec": 0
          }

        })
      } else {
        timerObj.day = Math.floor(now / 3600 / 24);
        timerObj.hour = Math.floor((now - timerObj.day * 3600 * 24) / 3600);
        timerObj.min = Math.floor((now - timerObj.day * 3600 * 24 - timerObj.hour * 3600) / 60);
        timerObj.sec = now - timerObj.day * 3600 * 24 - timerObj.hour * 3600 - timerObj.min * 60;
        this.setState({
          timerObj
        })
      }
    }, 1000)
  }

}

export default StatusTimer;